/****************
 *@description:  商城订单详情  @/orderManage/mallorder/detail
 *@author: Xhd
 *@API:  
 *@date: 2023-11-14 09:16:38
 *@version: V1.0.0
*************************************************************************/

import React, { useState, useEffect, useRef } from "react";
import { Row, Col, Space, Tooltip, Table } from "antd";
import GoBack from "@/components/TheGoBack";
import { QuestionCircleFilled } from "@ant-design/icons";
import { useLocation } from 'react-router-dom';
import TheImage from "@/components/TheImage";
import OrderStep from '../components/orderStep';
import OrderMemberInfo from '../components/memberInfo';
import OrderTable from '../components/orderTable';
import { apiShopOrderDetail } from "@/api/orderManage/index.js";
import "../../style/style.less";
import { Decimal } from 'decimal.js';

const MallOrderDetails = () => {
  const location = useLocation();
  const [orderInfo, setOrderInfo] = useState(null)


  useEffect(() => {
    getData()
  }, [])

  let getData = async () => {
    let orderId = location.state.id
    await apiShopOrderDetail({ orderId }).then(res => {
      setOrderInfo(res.data)
    })
  }

  return (
    <div className='wrap-box wrap-box-content'>
      <GoBack title={"订单详情"} />
      {
        orderInfo && <div>
          <OrderStep orderInfo={orderInfo} getData={getData}></OrderStep>
          <OrderMemberInfo orderInfo={orderInfo}></OrderMemberInfo>
          <OrderTable orderInfo={orderInfo.orderDetailList}></OrderTable>
          <Row  style={{ float: 'right', marginRight: 50 }}>
            <Col>
              <Row style={{ margin: '10px 0' }}>
                <Col>商品总价：</Col>
                <Col>
                  {orderInfo.orderTotalPrice ? "￥" + Decimal(orderInfo.orderTotalPrice).div(Decimal(100)).toNumber().toFixed(2) : "￥" + 0}
                </Col> 
              </Row>
              <Row style={{ margin: '10px 0' }}>
                <Col>运费：</Col>
                <Col>
                  {orderInfo.freight ? "￥" + Decimal(orderInfo.freight).div(Decimal(100)).toNumber().toFixed(2) : "￥" + 0}
                </Col>
              </Row>
              <Row style={{ margin: '10px 0' }}>
                <Col>优惠：</Col>
                <Col>
                  <Space>
                    {orderInfo.platformDiscountPrice ? "￥" + Decimal(orderInfo.platformDiscountPrice).div(Decimal(100)).toNumber().toFixed(2) : "￥" + 0}
                    <Tooltip title={
                      <Space direction={"vertical"}>
                        <div>优惠券抵扣：{orderInfo.couponTotal ? "￥" + Decimal(orderInfo.couponTotal).div(Decimal(100)).toNumber().toFixed(2) : "￥" + 0}</div>
                        <div>满减抵扣：{orderInfo.fullDecrementAmount ? "￥" + Decimal(orderInfo.fullDecrementAmount).div(Decimal(100)).toNumber().toFixed(2) : "￥" + 0}</div>
                      </Space>
                    }>
                      <QuestionCircleFilled style={{ fontSize: 15 }} />
                    </Tooltip>
                  </Space>
                </Col>
              </Row>
              {
                orderInfo.isProprietary === "Y" ?
                  <Row style={{ margin: '10px 0' }}>
                    <Col>哈哈豆抵扣：</Col>
                    <Col>
                      {orderInfo.integralDiscountPrice ? "￥" + Decimal(orderInfo.integralDiscountPrice).div(Decimal(100)).toNumber().toFixed(2) : "￥" + 0}
                    </Col>
                  </Row> : null
              }
              <Row style={{ color: "red", margin: '10px 0' }}>
                <Col>实付金额：</Col>
                <Col>
                  {orderInfo.orderPayPrice ? "￥" + Decimal(orderInfo.orderPayPrice).div(Decimal(100)).toNumber().toFixed(2) : "￥" + 0}
                </Col>
              </Row>
            </Col>
          </Row>
        </div>
      }
    </div>
  )
}

export default MallOrderDetails
